<template>
	<view class="reservation-info-wrapper">
		<view class="reservation-store-info">
			<swiper indicator-dots circular autoplay indicator-color="rgba(255,255,255,0.5)" indicator-active-color="rgba(255,255,255,1)"  class="swiper-box" 
			style="height: 500rpx; ">
				<swiper-item v-for="(item ,index) in (reservationInfo.product?.detailImage || [])" :key="index" >
					<view class="swiper-item" style="height: 500rpx; ">
						<image :src="item" style="width: 750rpx; height: 500rpx; " mode="aspectFill" @click="previewImage(index)"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="product-info conteainer-public-style mg24">
			<!-- <view class="card-title fz30 fw700">
				产品详情
			</view> -->
			<view class="">
				<view class="mb30 fz30">门店信息</view>
				<view class="fz28 mb30">
					{{reservationInfo.store?.storeName}}
				</view>
				<view class="fz26 color666 mb10">
					{{reservationInfo.store?.description || '-'}}
				</view>
				<view class="fz26 color666 flex-c-s mb24">
					<view class="">{{reservationInfo.store?.address || '-'}}</view>
					<image style="width: 40rpx;height: 40rpx;" src="/static/images/navigation@2x.png" mode=""></image>
				</view>
				<view class="fz26 color666 flex-c-s">
					<view class="">{{reservationInfo.store?.phone || '-'}}</view>
					<image style="width: 36rpx;height: 36rpx;" src="/static/images/dianhua.png" mode="" @click="callHandle(reservationInfo.store?.phone)"></image>
				</view>
			</view>
		</view>
		<view class="store-info conteainer-public-style mg24">
			<view class="mb30 fz30">当前门店客服信息</view>
			<view class="fz26 flex-c-s mb24">
				<view class="">{{reservationInfo.store?.storeCustomer.nickName || '-'}}</view> 
				<image v-if="reservationInfo.store?.storeCustomer.nickName" src="/static/images/kefu@2x.png" mode="" style="width: 36rpx;height: 36rpx;"></image>
			</view>
			<view class="fz26 color666 flex-c-s">
				<view class="">{{reservationInfo.store?.storeCustomer?.phone || '-'}}</view>
				<image v-if="reservationInfo.store?.storeCustomer?.phone" style="width: 36rpx;height: 36rpx;" src="/static/images/dianhua.png" mode="" @click="callHandle(reservationInfo.store?.storeCustomer?.phone)"></image>
			</view>
		</view>
		
		<view class="store-info conteainer-public-style mg24">
			<view class="mb30 fz30">预约信息</view>
			<view class="fz26 flex-c-s mb24">
				<text class="fz26 color999">预约时间</text>
				<view class="fz26">{{reservationInfo.appointmentTime || '-'}}</view> 
			</view>
			<view class="fz26 flex-c-s mb24">
				<text class="fz26 color999">密码锁密码</text>
				<view class="fz26">{{ reservationInfo.depositStatus === 3 ? (reservationInfo.store?.lockPassword || '-') : '当前状态不可查看密码'}}</view> 
			</view>
			<view class="fz26 flex-c-s mb24">
				<text class="fz26 color999">预约状态</text>
				<view class="fz26">{{ReservationEnum[reservationInfo.deposit?.status]}}</view> 
			</view>
			<view class="fz26 flex-c-s mb24">
				<text class="fz26 color999">押金状态</text>
				<view class="fz26">{{depositStatusText[reservationInfo.depositStatus]}}</view> 
			</view>
			<view class="fz26 flex-c-s">
				<text class="fz26 color999">备注信息</text>
				<view class="fz26">{{reservationInfo.remark || '-'}}</view> 
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { reservationDetail } from '@/http/my'
import { orderPayStatus, ReservationEnum, depositStatusText } from '@/config'

import type { IReservationInfo } from '@/types'

export default defineComponent({
	setup() {
		
		const state = reactive({
			reservationInfo: {} as IReservationInfo,
			orderPayStatus,
			ReservationEnum,
			depositStatusText,
		})
		onLoad((option) => {
			infoData(option.id)
		})
		
		const infoData = async (id: number) => {
			uni.showLoading({ title: '加载中' })
			try{
				let res = await reservationDetail(id) 
				if(res.code === 0) {
					state.reservationInfo = res.data
				}   
				console.log(res);
			}catch(e){ 
			}
			uni.hideLoading()
		}
		
		const callHandle = (phone: string) => {
			if(!phone) {
				uni.showToast({
					title: '电话号不能为空',
					icon: 'none'
				})
				return
			}
			uni.makePhoneCall({
				phoneNumber: phone, 
			})
		}
		
		const previewImage = (index: number) => {
			uni.previewImage({
				urls: (state.reservationInfo.product?.detailImage || []),
				current: index
			})
		}
		return {
			callHandle,
			previewImage,
			...toRefs(state)
		}
	}
})
</script>

<style>page{ background-color: #f8f8fa;}</style>

<style lang="scss" scoped>
.reservation-info-wrapper{
	padding-bottom: 20rpx;
	.store-info{
		
	}
}
</style>